<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <style media="screen">

#skyline {
 width: 400px;
 height: 200px;
 background: url(test-3.jpg);
 margin: 10px auto; padding: 0;
 position: relative;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#skyline li, #skyline a {height: 200px; display: block;}
#panel1b {left: 0; width: 95px;}
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}

#panel1b a:hover {background: transparent url(test-3.jpg) 0 -200px no-repeat;}
#panel2b a:hover {background: transparent url(test-3.jpg) -96px -200px no-repeat;}
#panel3b a:hover {background: transparent url(test-3.jpg) -172px -200px no-repeat;}
#panel4b a:hover {background: transparent url(test-3.jpg) -283px -200px no-repeat;}





#iconmenu {position: relative; margin: 10px auto; padding: 3px; width: 206px; height: 52px; background: url(pattern.gif);}
#iconmenu li {width: 50px; height: 50px; position: absolute; top: 2px; background: url(icons.gif) 0 0 no-repeat; display: block; list-style: none;}
#iconmenu a {width: 50px; height: 50px; display: block; border: solid 1px #fff;}
#iconmenu a:hover {border: solid 1px #000;}
#iconmenu #panel1c {left: 2px;}
#iconmenu #panel2c {left: 54px; background-position: -51px 0;}
#iconmenu #panel3c {left: 106px; background-position: -102px 0;}
#iconmenu #panel4c {left: 158px; background-position: -153px 0;}

#iconmenu #panel1c a:hover {background: url(icons.gif) -1px -52px no-repeat;}
#iconmenu #panel2c a:hover {background: url(icons.gif) -52px -52px no-repeat;}
#iconmenu #panel3c a:hover {background: url(icons.gif) -103px -52px no-repeat;}
#iconmenu #panel4c a:hover {background: url(icons.gif) -154px -52px no-repeat;}





#blobs {
 width: 300px;
 height: 150px;
 background: url(blobs.gif);
 margin: 10px auto; padding: 0;
 position: relative;
}
#blobs li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}

#blobs a {display: block;}

#blob1 {left: 9px; top: 7px; width: 86px; height: 130px;}
#blob2 {left: 77px; top: 16px; width: 79px; height: 86px;}
#blob3 {left: 160px; top: 0px; width: 112px; height: 77px;}
#blob4 {left: 173px; top: 57px; width: 120px; height: 80px;}
#blob5 {left: 110px; top: 102px; width: 98px; height: 45px;}
#blob1 a {height: 130px;}
#blob2 a {height: 86px;}
#blob3 a {height: 77px;}
#blob4 a {height: 80px;}
#blob5 a {height: 45px;}

#blob1 a:hover {background: url(blobs.gif) -10px -307px no-repeat;}
#blob2 a:hover {background: url(blobs.gif) -77px -166px no-repeat;}
#blob3 a:hover {background: url(blobs.gif) -160px -300px no-repeat;}
#blob4 a:hover {background: url(blobs.gif) -173px -207px no-repeat;}
#blob5 a:hover {background: url(blobs.gif) -110px -402px no-repeat;}




#xblobs {
 width: 300px;
 height: 150px;
 background: url(blobs2.gif);
 margin: 10px auto; padding: 0;
 position: relative;
}
#xblobs li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}

#xblobs a {display: block;}

#xblob1 {left: 9px; top: 7px; width: 86px; height: 130px;}
#xblob2 {left: 77px; top: 16px; width: 79px; height: 86px;}
#xblob3 {left: 160px; top: 0px; width: 112px; height: 77px;}
#xblob4 {left: 173px; top: 57px; width: 120px; height: 80px;}
#xblob5 {left: 110px; top: 102px; width: 98px; height: 45px;}
#xblob1 a {height: 130px;}
#xblob2 a {height: 86px;}
#xblob3 a {height: 77px;}
#xblob4 a {height: 80px;}
#xblob5 a {height: 45px;}

#xblob1 a:hover {background: url(blobs2.gif) -9px -157px no-repeat;}
#xblob2 a:hover {background: url(blobs2.gif) -77px -166px no-repeat;}
#xblob3 a:hover {background: url(blobs2.gif) -160px -150px no-repeat;}
#xblob4 a:hover {background: url(blobs2.gif) -173px -207px no-repeat;}
#xblob5 a:hover {background: url(blobs2.gif) -110px -252px no-repeat;}


 </style>
 
</head>

<body>

CSS Sprites: Image Slicing’s Kiss of Death http://www.alistapart.com/articles/sprites/
	
 <ul id="skyline">
  <li id="panel1b"><a href="#">A</a></li>
  <li id="panel2b"><a href="#">B</a></li>
  <li id="panel3b"><a href="#">C</a></li>
  <li id="panel4b"><a href="#">D</a></li>
 </ul>
 
 
 <ul id="iconmenu">
  <li id="panel1c"><a href="#">A</a></li>
  <li id="panel2c"><a href="#">B</a></li>
  <li id="panel3c"><a href="#">C</a></li>
  <li id="panel4c"><a href="#">D</a></li>
 </ul>
 
 <ul id="blobs">
  <li id="blob1"><a href="#"></a></li>
  <li id="blob2"><a href="#"></a></li>
  <li id="blob3"><a href="#"></a></li>
  <li id="blob4"><a href="#"></a></li>
  <li id="blob5"><a href="#"></a></li>
 </ul>
 
 <ul id="xblobs">
  <li id="xblob1"><a href="#"></a></li>
  <li id="xblob2"><a href="#"></a></li>
  <li id="xblob3"><a href="#"></a></li>
  <li id="xblob4"><a href="#"></a></li>
  <li id="xblob5"><a href="#"></a></li>
 </ul>
 
</body>
</html>